<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
    <title>React 学习！！</title>
</head>
<body>
<div id="app"></div>
<script src="../bower_components/react/react.min.js"></script>
<script src="../bower_components/react/react-dom.min.js"></script>
<script src="../bower_components/react/browser.min.js"></script>
<script type="text/babel">
   
    var LogicComponent = React.createClass({
      
      render:function(){
        // JSX Logic 写在render和return之间
        // JSX中注释是通过 {/** 注释内容 **/}
        var style;
        var s = 1100;
        if(s>1000){
          style = {color:"red"}
        }else{
          style = {color:"black"}
        }
        return (  <div>
                    <h1 style={style}>Logic Demo</h1>
                  {/** JSX中的注释内容，这里将不会显示内容 **/}
                  </div>
               )
      }
    });

    
    ReactDOM.render( <LogicComponent/>, 
      document.getElementById('app'),
      function(){
        console.log('渲染完成啦！！');
      }
    )
</script>
</body>
</html>